<template>
	<view class="content">
		<view class="zjc-rb">
			<uni-swiper-dot :info="info" :current="current" field="content" mode="default">
				<swiper class="swiper-box" @change="change" autoplay="true" interval="3000">
					<swiper-item v-for="(item ,index) in info" :key="index">
						<image style="width: 750rpx; height: 500rpx;" :src="item.url" alt="" mode="aspectFill">
					</swiper-item>
				</swiper>
			</uni-swiper-dot>
		</view>
		<view class="notify">
			<uni-notice-bar show-icon scrollable
										:text="notice" />
		</view>
		<view class="itmes-context">
			<view class="service-item" @click="toticket(2)">
				<view class="icon">
					<image src="../../static/icon/index-icon/scenery.png" mode=""></image>
				</view>
				<view>
					<text>景区门票</text>
				</view>
			</view>
			<view class="service-item" @click="toRoute()">
				<view class="icon">
					<image src="../../static/icon/index-icon/rout.png" mode=""></image>
				</view>
				<view>
					<text>热门路线</text>
				</view>
			</view>
			<view class="service-item" @click="toFood()">
				<view class="icon">
					<image src="../../static/icon/index-icon/food.png" mode=""></image>
				</view>
				<view>
					<text>特色美食</text>
				</view>
			</view>
			<view class="service-item" @click="toAct()">
				<view class="icon">
					<image src="../../static/icon/index-icon/activity.png" mode=""></image>
				</view>
				<view>
					<text>近期活动</text>
				</view>
			</view>
			<view class="service-item" @click="toShop()">
				<view class="icon">
					<image src="../../static/icon/index-icon/supermarket.png" mode=""></image>
				</view>
				<view>
					<text>文创特产</text>
				</view>
			</view>
			<view class="service-item" @click="toStrategy()">
				<view class="icon">
					<image src="../../static/icon/index-icon/strategy.png" mode=""></image>
				</view>
				<view>
					<text>旅游攻略</text>
				</view>
			</view>
			<view class="service-item">
				<view class="icon">
					<image src="../../static/icon/index-icon/map.png" mode=""></image>
				</view>
				<view>
					<text>智能导览</text>
				</view>
			</view>
			<view class="service-item" @click="toHelp()">
				<view class="icon">
					<image src="../../static/icon/index-icon/sos.png" mode=""></image>
				</view>
				<view>
					<text>紧急求助</text>
				</view>
			</view>
		</view>
		
		<view class="scense-content index-all-content">
			<view class="m-header">
				<view class="m-title">
					<text>热门景点</text>
				</view>
				<view class="m-more">
					<text>查看更多>></text>
				</view>
			</view>
			<view class="m-context">
				<view class="m-con-items" v-for="item in index_scences" :key="item.scId" @click="toSc(item.scId)">
					<image :src="item.scImage" mode=""></image>
					<view style="margin-left: 24rpx;">
						<text style="font-size: 26rpx;">{{item.scName}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="stragety-content index-all-content">
			<view class="m-header">
				<view class="m-title">
					<text>旅游攻略</text>
				</view>
				<view class="m-more">
					<text>查看更多>></text>
				</view>
			</view>
			<view class="m-context">
				<view class="m-con-items" v-for="item in index_stragetys" :key="item.stId" @click="toSt(item.stId)">
					<image :src="item.stCoverImage" mode=""></image>
					<view style="margin-left: 24rpx;">
						<text style="font-size: 26rpx;">{{item.stTitle}}</text>
					</view>
					
				</view>
			</view>
		</view>
		<view class="food-content index-all-content">
			<view class="m-header" style="height: 50rpx;">
				<view class="m-title">
					<text>景区动态</text>
				</view>
				<view class="m-more">
					<text>查看更多>></text>
				</view>
			</view class="m-act-context">
			
				<uni-card title="" extra="">
					<view class="act-items" v-for = "item in index_activities" :key="item.id" @click="toAct(item.actId)">
						<view>
							<text>{{item.actName}}</text>
						</view>
						<view>
							<text>{{item.actAddress}} | {{item.actDatetime}}</text>
						</view>
					</view>
				</uni-card>
		</view>
	
	</view>
</template>

<script>
import { request } from '../../utils/request'
	export default {
		data() {
			return {
				title: 'Hello',
				current:1,
			
				info: [{
						content: '内容 A',
						url:"../../static/rb1.jpg"
					}, 
					{
					    content: '内容 B',
						url:'../../static/rb2.jpg'
					}, 
					{
					    content: '内容 C',
						url:'../../static/rb3.jpg'
					}],
				notice:'通知，雨天将至，请游客准备好雨衣，小心路滑，山上禁止打伞，风大以免吹倒，再三提醒，如有打伞，后果自负',
				//从数据库中拉去数据
				index_activities: [
					{
						title:'活动1',
						danwei:'旅游局',
						id:1,
						actDate:'2021-11-01'
					},
					{
						title:'活动2',
						danwei:'旅游局',
						id:2,
						actDate:'2021-11-01'
					},
					{
						title:'活动3',
						danwei:'旅游局',
						id:3,
						actDate:'2021-11-01'
					}
				],
				index_scences: [
					{
						title:'风景1',
						coverImgurl:'',
						id:1
					},
					{
						title:'风景2',
						coverImgurl:'',
						id:2
					},
					{
						title:'风景3',
						coverImgurl:'',
						id:3
					},
					{
						title:'风景4',
						coverImgurl:'',
						id:4
					}
				],
				index_stragetys: [
					{
						title:'攻略1',
						coverImgurl:'',
						id:1
					},
					{
						title:'攻略2',
						coverImgurl:'',
						id:2
					},
					{
						title:'攻略3',
						coverImgurl:'',
						id:3
					},
					{
						title:'攻略4',
						coverImgurl:'',
						id:4
					}
				]
			}
		},
		onLoad() {
			this.init()
		},
		methods: {
			toSc(id){
				uni.navigateTo({
					url:"/pages/ticket/ticket?scid="+id
				})
			},
			toAct(id){
				uni.navigateTo({
					url:"/pages/detailofactivity/detailofactivity?actId="+id
				})
			},
			toSt(id){
				uni.navigateTo({
					url:"/pages/st-detail/st-detail?stid="+id
				})
			},
			
			init()
			{
				this.request({
					url:"/home-page",
					method:"GET"
				}).then(res=>{
					console.log(res.data)
					if(res.code==='1'){
						this.index_scences = res.data.sceneryList
						this.index_stragetys = res.data.strategiesList
					}
				})
			
				this.request({
					url:"/activity/index",
					method:'GET',
				
				}).then(res=>{
					if(res.code==='1'){
						this.index_activities = res.data
					}
					else{
						console.log("失败")
					}
				}).catch(()=>{
					console.log("系统错误")
				})
			},
			change(e){
				this.current = e.detail.current
			},
			toticket(id){
				
				uni.navigateTo({
					url:"/pages/view-list/view-list"
				})
			},
			toStrategy(){
				uni.navigateTo({
					url:"/pages/strategy-list/strategy-list"
				})
			},
			toHelp(){
					uni.navigateTo({
						url:"/pages/seekhelp/seekhelp"
					})
			},
			toShop(){
				uni.navigateTo({
					url:"/pages/shop/shop"
				})
			},
			toFood(){
				uni.navigateTo({
					url:"/pages/listoffood/listoffood"
				})
			},
			toAct(){
				
				uni.navigateTo({
					url:"/pages/listofactivity/listofactivity"
				})
			},
			toRoute(){
				uni.navigateTo({
					url:"/pages/travel-route/travel-route"
				})
			}
			
		}
	}
</script>

<style scoped>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.notify {
	  margin-top: 25rpx;
	  width: 100%;
	  overflow: hidden;
	  white-space: nowrap;
	}
	
	.notify p {
	  display: inline-block;
	  animation: scroll 10s linear infinite;
	  font-size: 26rpx;
	  color: gray;
	 
	}
	@keyframes scroll {
	  0% {
	    transform: translateX(100%);
	  }
	  100% {
	    transform: translateX(-100%);
	  }
	}
	.zjc-rb {
		width: 100%;
		height: 500rpx;
		margin: 0 0;
	}
	.swiper-box{
		width: 100%;
		height: 500rpx;
	}
	.itmes-context{
		display: flex;
		width: 750rpx;
		height: 300rpx;
		margin-top: 10rpx;
		flex-wrap: wrap;
	}
	.service-item {
		width: 120rpx;
		height: 45%;
	
		margin-left: 50rpx;
		margin-top: 50rpx;
	}
	.m-act-context .uni-card {
		margin-top: 0rpx;
		width: 100%;
	}
	.icon {
		width: 68rpx;
		height: 68rpx;
		margin: 0 auto;
	}
	.icon image {
		width: 68rpx;
		height: 68rpx;
		
	}
	.act-items {
		border-bottom: #f1f1f1 solid 2rpx;
	}
	.service-item view text {
		color: gray;
		font-size: 25rpx;
		text-align: center;
		margin-left: 10rpx;
	}
	.index-all-content {
		margin-top: 50rpx;
		width: 100%;
		height: 800rpx;
		flex-wrap: wrap;
	}
	.index-all-content .m-header {
		height: 90rpx;
		display: flex;
		justify-content: space-between;
	}
	.scense-content{
		margin-top:100rpx;
	}
	.m-more {
		font-size: 20rpx;
		color: gray;
	}
	.m-title{
		color: #0a4f3c;
	}
	.m-context{
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		height: 700rpx;
	}
	.m-act-context {
		width: 100%;
	}
	.m-con-items{
		width: 46%;
		height: 46%;
		margin-top: 20rpx;
		margin: 0 auto;
		background-color: #f1f1f1;
		border-radius: 20rpx;
	}
	.m-con-items image {
		width: 100%;
		height: 76%;
		
		border-radius: 10rpx;
	}
	.m-con-items view {
		width: 90%;
		height: 25%;
		margin-top: 10rpx;
	}
	.m-con-items view text{
		font-size: 30rpx;
	}
	.food-content {
		height: auto;
	}
	.m-header {
		margin-left: 20rpx;
	}
</style>
